<template>
  <el-table :data="computedTableData" :row-key="getRowKey" @selection-change="handleSelectionChange" ref="myTable"
    style="width: 800px">
    <el-table-column type="selection" :reserve-selection="true" width="55" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="phone" label="电话" width="180" />
    <el-table-column prop="address" label="地址" />
  </el-table>
  <p></p>
  <!-- 分页组件 -->
  <el-pagination background layout="prev, pager, next" :total="tableData.length" :page-size="pageSize"
    @change="handleChange" />
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from "vue"

// 设置每页显示的条目数量
const pageSize = 5
// 当前页数，使用ref进行响应式绑定
const currentPage = ref(1)
// 根据当前页和每页显示的条目数量计算要显示的数据
const computedTableData = ref([]);

const myTable = ref()
const selectedId = ref([2, 4, 9])

//页面数据
const tableData = ref([
  { id: 1, name: "周军", phone: "14573161763", address: "南京解放路9号" },
  { id: 2, name: "张芳", phone: "14124978186", address: "重庆长安街5号" },
  { id: 3, name: "刘伟", phone: "13537903700", address: "武汉解放路7号" },
  { id: 4, name: "黄静", phone: "19945446079", address: "重庆和平路1号" },
  { id: 5, name: "张娜", phone: "17385360867", address: "广州朝阳路2号" },
  { id: 6, name: "李强", phone: "14573161763", address: "北京朝阳门外大街" },
  { id: 7, name: "王敏", phone: "14124978186", address: "上海南京东路" },
  { id: 8, name: "赵丽", phone: "13537903700", address: "成都天府广场" },
  { id: 9, name: "孙杰", phone: "19945446079", address: "杭州西湖区" },
  { id: 10, name: "周瑜", phone: "17385360867", address: "苏州园区" },
  { id: 11, name: "李华", phone: "13798765432", address: "深圳南山区" },
  { id: 12, name: "王芳", phone: "15987654321", address: "广州白云区" },
  { id: 13, name: "赵勇", phone: "13212345678", address: "上海浦东新区" },
  { id: 14, name: "钱多", phone: "18887654321", address: "北京东城区" },
  { id: 15, name: "孙悟空", phone: "15012345678", address: "杭州余杭区" },
  { id: 16, name: "周星驰", phone: "13987654321", address: "深圳福田区" },
  { id: 17, name: "吴京", phone: "15876543210", address: "成都锦江区" },
  { id: 18, name: "郑伊健", phone: "13612345678", address: "重庆江北区" },
  { id: 19, name: "刘德华", phone: "18765432109", address: "南京玄武区" },
  { id: 20, name: "梁朝伟", phone: "13598765432", address: "上海黄浦区" },
  { id: 21, name: "张学友", phone: "18912345678", address: "广州越秀区" },
  { id: 22, name: "黎明", phone: "13198765432", address: "深圳宝安区" },
  { id: 23, name: "郭富城", phone: "13312345678", address: "北京海淀区" },
  { id: 24, name: "周润发", phone: "18212345678", address: "杭州萧山区" },
  { id: 25, name: "成龙", phone: "17765432109", address: "重庆渝中区" }
])

const getRowKey = (row: any) => {
  return row.id
}

const handleSelectionChange = (val: any[]) => {
  console.log("选中的行", val)
}

const handleChange = (currentPage: number, pageSize: number) => {
  // 点击事件
  const start = (currentPage - 1) * pageSize
  const end = start + pageSize
  computedTableData.value = tableData.value.slice(start, end)
}

const initData = async () => {
  computedTableData.value = tableData.value.slice(0, pageSize)
}

const loadDataAndUpdateSelection = async () => {
  // 确保DOM已更新
  await nextTick()
  // 更新选中状态
  tableData.value.forEach((row: any) => {
    if (selectedId.value.includes(row.id)) {
      myTable.value.toggleRowSelection(row, true)
    }
  })
}

onMounted(async () => {
  // 在组件加载时执行初始化
  await initData()
  loadDataAndUpdateSelection()
}) 
</script>